<template>
	<div class="yinlangbang">
		<div class="haowubang_header">
			<div class="haowubang_header1">
				<div>日榜</div>
				<div>
					<el-date-picker
					  v-model="value2"
					  align="right"
					  type="date"
					  placeholder="选择日期"
					  :picker-options="pickerOptions">
					</el-date-picker>
				</div>
				<div>数据说明<i class="el-icon-question"></i></div>
			</div>
			<div class="haowubang_header2">
				<span>更新日期：</span>
				<span>2020-10-28 12：07</span>
				<span v-loading.fullscreen.lock="fullscreenLoading" @click="xiazai"><i class="el-icon-printer"></i>导出数据</span>
			</div>
		</div>
		
		<div class="yinlang">
			<div class="yinlang1" v-for="(item,index) in yinlang" :key="index">
				<div class="yinlang1_1">
					<img :src="item.img" />
				</div>
				<div class="yinlang1_2">
					<span>{{item.name}}</span>
					<span>粉丝数：{{item.fen_si | guolv}}</span>
					<span>音浪数：{{item.yinlangshu | guolv}}</span>
				</div>
			</div>
		</div>
		<div class="fufei">
			免费版仅可查看6条数据，点击<span @click="open">立即升级</span>查看更多数据
		</div>
	</div>
</template>

<script>
	export default{
		name:"yinlangbang",
		data(){
			return{
				shu:234232,
				fullscreenLoading:false,
				column:[
					{title:'序号',key:'id',type:"text"},
					{title:'名称',key:'name',type:"text"},
					{title:'达人头像',key:'img',type:"image",width:100,height:100},
					{title:'粉丝数',key:'fen_si',type:"text"},
					{title:'音浪数',key:'yinlangshu',type:"text"},
				],
				yinlang:[
					{
						id:1,
						name:'海绵宝宝',
						img:'https://www.koltuita.com/wxxcx/img/val1.png',
						fen_si:23432423,
						yinlangshu:8345834
					},
					{
						id:2,
						name:'派大星',
						img:'https://www.koltuita.com/wxxcx/img/val4.png',
						fen_si:23423423,
						yinlangshu:567346
					},
					{
						id:3,
						name:'章鱼哥',
						img:'https://www.koltuita.com/wxxcx/img/val1.png',
						fen_si:4523421,
						yinlangshu:123242
					},
					{
						id:4,
						name:'蟹老板',
						img:'https://www.koltuita.com/wxxcx/img/val4.png',
						fen_si:6856856,
						yinlangshu:956856745
					},
					{
						id:5,
						name:'泡芙老师',
						img:'https://www.koltuita.com/wxxcx/img/val1.png',
						fen_si:23423,
						yinlangshu:34634523
					},
					{
						id:6,
						name:'水母',
						img:'https://www.koltuita.com/wxxcx/img/val4.png',
						fen_si:23414,
						yinlangshu:35645634
					}
				],
				
				//日期选择
				pickerOptions: {
				  disabledDate(time) {
					return time.getTime() > Date.now();
				  },
				  shortcuts: [{
					text: '今天',
					onClick(picker) {
					  picker.$emit('pick', new Date());
					}
				  }, {
					text: '昨天',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24);
					  picker.$emit('pick', date);
					}
				  }, {
					text: '一周前',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
					  picker.$emit('pick', date);
					}
				  }]
				},
				value1: '',
				value2: '',
			}
		},
		//过滤器
		filters:{
			guolv(shuzi){
			  if(shuzi>0){
				var wan=parseInt(shuzi).toString();
				var qumo=wan%10000;
				//粉丝数改变
				if(wan.length<5){
					shuzi=wan;
				}else if(wan.length>4 && wan.length<=8){
					let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
					shuzi=fen_si;
				}else if(wan.length>8){
					let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
					shuzi=fen_si;
				}
			  }
			  return shuzi
			}
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			$(".yinlang1").click(function(){
				$(this).css({
					'border': '1px solid #0091FF'
				})
				$(this).siblings().css({
					'border': '1px solid #D4D4D4'
				})
			})
		},
		methods:{
			xiazai(){
				//点击导出表格数据到exe表
				this.fullscreenLoading = true;
				setTimeout(() => {
					this.fullscreenLoading = false;
					this.$message.success("数据导出成功！")
					
					this.table2excel(this.column, this.yinlang, "音浪收入榜单")//生成Excel表格，自动下载
				}, 2000);
			},
			
			open() {
				this.$confirm('此功能仅限高级版本使用，请升级后再试', '升级提示', {
				  confirmButtonText: '立即升级',
				  cancelButtonText: '我在想想',
				  type: 'warning',
				}).then(() => {
				 //  this.$message({
					// type: 'success',
					// message: '立即升级!'
				 //  });
				 this.$router.push('/home/'+this.$store.state.luyoushu+'/xufeizhongxin')
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '好好在想想哟！老表'
				  });          
				});
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.yinlangbang{
		
		.haowubang_header{
			padding: 0.8rem 2rem;
			background-color: #fff;
			border-bottom-left-radius:0.1rem ;
			border-bottom-right-radius:0.1rem ;
			
			.haowubang_header1{
				float: left;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				div:nth-of-type(1){
					color: #666;
					font-size: 0.4rem;
				}
				div:nth-of-type(2){
					color: #666;
					font-size: 0.4rem;
					margin: 0 1rem ;
				}
				div:nth-of-type(3){
					color: #666;
					font-size: 0.4rem;
					cursor: pointer;
					i{
						margin-left:0.2rem ;
					}
				}
				div:nth-of-type(3):hover{
					color: #0091FF;
				}
			}
			.haowubang_header2{
				float: right;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				span:nth-of-type(1){
					color: #333333;
					font-size: 0.4rem;
				}
				span:nth-of-type(2){
					color: #666666;
					font-size: 0.4rem;
					margin-right:1rem ;
				}
				span:nth-of-type(3){
					color: #666666;
					font-size: 0.4rem;
					padding: 0.1rem 0.3rem;
					border: 1px solid #D4D4D4;
					border-radius:0.1rem ;
					cursor: pointer;
					
					i{
						margin-right:0.2rem ;
					}
				}
				span:nth-of-type(3):hover{
					color: #fff;
					background-color: #0091FF;
				}
				
			}
		}
		.haowubang_header::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.yinlang{
			margin-top:1rem ;
			border-radius:0.1rem ;
			background-color: #fff;
			padding: 1.5rem 0;
			padding-left:1.5rem ;
			box-sizing: border-box;
			
			.yinlang1{
				cursor: pointer;
				box-sizing: border-box;
				border-radius:0.1rem ;
				border: 1px solid #D4D4D4;
				width: 21%;
				display: flex;
				align-items: center;
				padding: 0.6rem 0;
				float: left;
				margin-right:1.5rem ;
				margin-bottom:1.5rem ;
				
				.yinlang1_1{
					margin-left:1.3rem ;
					img{
						width: 2rem;
						height: 2rem;
						border-radius:50% ;
					}
				}
				.yinlang1_2{
					margin-left:0.4rem ;
					span{
						display: block;
						
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box; 
						-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
						-webkit-box-orient: vertical;
					}
					span:nth-of-type(1){
						color: #000;
						font-size: 0.4rem;
					}
					span:nth-of-type(2){
						color: #999999;
						font-size: 0.35rem;
						margin: 0.3rem 0;
					}
					span:nth-of-type(3){
						color: #0091FF;
						font-size: 0.35rem;
					}
				}
			}
			@keyframes jello-diagonal-1 {
			  0% {
			    transform: skew(0deg 0deg);
			  }
			  30% {
			    transform: skew(205deg -205deg);
			  }
			  40% {
			    transform: skew(-5deg, 5deg);
			  }
			  50% {
			    transform: skew(5deg, -5deg);
			  }
			  65% {
			    transform: skew(-15deg, 15deg);
			  }
			  75% {
			    transform: skew(15deg, -15deg);
			  }
			  100% {
			    transform: skew(-15deg 15deg);
			  }
			}
			.yinlang1:hover{
				animation: jello-diagonal-1 0.8s both;
				transform-origin:bottom  center;
			}
		}
		.yinlang::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.fufei{
			text-align: center;
			color: #666666;
			font-size: 0.4rem;
			padding: 0.4rem 0;
			
			span{
				cursor: pointer;
				color: #0091FF;
				font-size: 0.4rem;
			}
		}
	}
</style>
